import './Scss/ScheduleInvest.scss'
import dayjs from 'dayjs'
import { Progress } from 'antd'
import { Http } from '../../../../Common/Api'
import { Pie } from '@ant-design/plots'
import { useState, useEffect } from 'react'
import { useRequest, useBoolean } from 'ahooks'
import { LargeScreenTablesModal } from '../../Common/LargeScreen/LargeScreenModal'

import { TitleSmall001 } from '../Common/SmallTitle'

import { WebTemplateUrl } from './configuration'

export const ScheduleInvest001 = () => {
    // one
    const [OneProgress, setOneProgress] = useState(78.8)
    const [DataOne, setDataOne] = useState([])
    // Two
    const [ChartsTwo, setChartsTwo] = useState()
    const [ColorTwo] = useState(['#07CCB0', '#BFFFA7', '#FF817C', '#ACCDFF', '#B9ECED'])
    const [DataTwo, setDataTwo] = useState([])
    useEffect(() => {
        const config = {
            width: 140,
            height: 140,
            data: DataTwo,
            angleField: 'value',
            colorField: 'type',
            color: ColorTwo,
            radius: 1,
            innerRadius: 0.45,
            interactions: [{ type: 'element-default' }],
            label: false,
            tooltip: false,
            legend: false,
            statistic: {
                title: {
                    offsetY: 5,
                    style: { fontSize: 30, fontFamily: 'Bahnschrift', fontWeight: 'bold', color: '#FFFFFF' },
                    content: '',
                },
                content: {
                    offsetY: 10,
                    style: { fontSize: '16px', fontFamily: 'PingFang', fontWeight: 'bold', color: '#60EAFF' },
                    content: '',
                },
            },
            pieStyle: { lineWidth: 0 },
        }
        setChartsTwo(config)
    }, [ColorTwo, DataTwo])

    const { runAsync: getProgressGetTotalInvest } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            const [{ accumulativeAmount, thisMonthAmount, thisYearAmount, totalAmount }] = list
            setDataOne([
                { uuid: '1', title: '总投资', value: parseInt(totalAmount / 10000), unit: '万', color: '#CFFFEC' },
                {
                    uuid: '2',
                    title: '累计投资',
                    value: parseInt(accumulativeAmount / 10000),
                    unit: '万',
                    color: '#E9FFCF',
                },
                { uuid: '3', title: '本年投资', value: parseInt(thisYearAmount / 10000), unit: '万', color: '#FFDB7A' },
                {
                    uuid: '4',
                    title: '本月投资',
                    value: parseInt(thisMonthAmount / 10000),
                    unit: '万',
                    color: '#FFBC7A',
                },
            ])
            setOneProgress(parseInt((accumulativeAmount / totalAmount) * 10000) / 100)
        },
    })

    const { runAsync: getProgressGetInvestList } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(
                ({ uuid, tableName, amount }) =>
                    (data = [...data, { uuid, type: tableName, value: parseInt(amount / 10000) }]),
            )
            setDataTwo(data)
        },
    })

    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [Parameter, setParameter] = useState()

    useEffect(() => {
        getProgressGetTotalInvest({ url: 'getProgressGetTotalInvest', data: { Date: dayjs().format('YYYY-MM') } })
        getProgressGetInvestList({ url: 'getProgressGetInvestList' })
    }, [getProgressGetTotalInvest, getProgressGetInvestList])

    return (
        <div className="ScheduleInvest001">
            <div>
                <div>
                    {DataOne.map(({ uuid, title, value, unit, color }) => (
                        <div key={uuid}>
                            <div style={{ color }}>{title}</div>
                            <div>
                                <div>{value}</div>
                                <div>{unit}</div>
                            </div>
                        </div>
                    ))}
                </div>
                <div
                    className="Progress"
                    onClick={() => {
                        setParameter({
                            uuid: '',
                            type: 'LargeScreeTable',
                            classification: 'InvestMonthStatListByInvestList',
                        })
                        setTrue()
                    }}
                >
                    <img src={WebTemplateUrl + 'sc001.png'} alt="" />
                    <Progress
                        trailColor="#007E68"
                        strokeColor="#D4FFFA"
                        type="circle"
                        strokeLinecap="butt"
                        size={220}
                        strokeWidth={16}
                        percent={OneProgress}
                        format={percent => (
                            <div className="ChartsNumber">
                                <div>{percent}%</div>
                                <div>完成率</div>
                            </div>
                        )}
                    />
                </div>
            </div>
            <div>
                <TitleSmall001 title="总投资" />
                <div className="Charts">
                    {ChartsTwo && <Pie {...ChartsTwo} />}
                    <div className="Table">
                        {DataTwo.map(({ uuid, type, value }, index) => (
                            <div key={uuid}>
                                <div style={{ color: ColorTwo[index] }}>{type}</div>
                                <div>{value} 万</div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>

            {TowModal && Parameter && (
                <LargeScreenTablesModal className="ItemTitle" Off={setFalse} title="投资明细" parameter={Parameter} />
            )}
        </div>
    )
}
